/*
用法：
    <yl-uploader class="uploader" file-list="{{ fileList2 }}" max-count="{{max}}" show-upload="{{false}}" bind:success="uploaderSuccess" bind:delete="deleteFunc">
  Props
    file-list           图片数组
    max-count           上传数量限制
    deletable           是否展示删除按钮
    show-upload         是否使用文件上传
    multiple            是否多选
    preview-full-image  是否在点击文件预览图后预览文件
    size-type           是否压缩所选文件
    image-fit           预览图裁剪模式
    value-key           数据源中图片地址对应的key，默认url
  Events
    success             选择图片完成
    delete              选择图片失败
  Slot
    -                   默认插槽，自定义上传按钮
  外部样式
    uploader-class      图片容器样式
    image-class         图片样式
  其他
    --yl-uploader-height      设置上传按钮、预览图片的宽高
    --yl-uploader-width
*/
Component({
  externalClasses: ["uploader-class","image-class"],
  /**
   * 组件的属性列表
   */
  properties: {
    // 图片数组
    fileList: {
      type: Array,
      value: [],
      observer: "formatFileList",
    },
    // 数据源中每项的key
    valueKey: {
      type: String,
      value: "url",
    },
    // 文件上传数量限制
    maxCount: {
      type: Number,
      value: 100,
    },
    // 是否展示删除按钮
    deletable: {
      type: Boolean,
      value: true,
    },
    // 是否显示上传入口
    uploadAble: {
      type: Boolean,
      value: true,
    },
    // 是否使用默认的文件上传
    showUpload: {
      type: Boolean,
      value: true,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      value: false,
    },
    //  是否在点击文件预览图后预览文件
    previewFullImage: {
      type: Boolean,
      value: true,
    },
    // 是否压缩所选文件
    sizeType: {
      type: Array,
      value: ["compressed"],
    },
    // 预览图裁剪模式，可选值参考小程序image组件的mode属性
    imageFit: {
      type: String,
      value: "aspectFill",
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    isInCount: true,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    formatFileList() {
      this.setData({
        isInCount: this.data.fileList.length < this.data.maxCount,
      });
    },
    // 选择图片 
    startUpload() {
      var _this = this;
      wx.chooseMedia({
        count: _this.data.multiple ? Math.min(_this.data.maxCount, 9) : 1,
        mediaType: ["image"],
        sizeType: _this.data.sizeType,
        success: function (res) {
          _this.triggerEvent("success", res);
        },
        fail: function (err) {
          _this.triggerEvent("error", err);
        },
      });
    },
    // 预览图片
    onPreviewImage: function (event) {
      if (!this.data.previewFullImage) return;
      var index = event.currentTarget.dataset.index;
      var item = this.data.fileList[index];
      var _this = this;
      var _fileList = this.data.fileList.map(function (item) {
        return item[_this.data.valueKey];
      });
      wx.previewImage({
        urls: _fileList,
        current: item[_this.data.valueKey],
        fail: function () {
          wx.showToast({ title: "预览图片失败", icon: "none" });
        },
      });
    },
    // 删除
    deleteItem: function (event) {
      var indexTemp = event.currentTarget.dataset.index;
      this.triggerEvent("delete", {
        index: indexTemp,
        file: this.data.fileList[indexTemp],
      });
    },
  },
});
